<template>
  <div>
    <nav-bar />
    <nav>
      <van-search
        v-model="value"
        placeholder="按内容搜索"
        background="#ff6040"
      />
      <van-tabs>
        <van-tab
          :title="item.name"
          v-for="item in topnav"
          :key="item.id"
        ></van-tab>
      </van-tabs>
    </nav>
    <van-button class="goods" color="#FF6040" plain
      >筛选11.11大促商品</van-button
    >
    <van-list v-if="goodsList.length>0">
      <van-card
        v-for="item in goodsList"
        :key="item.id"
        @click="goDetail(item.id)"
        :price="item.price.toFixed(2)"
        :desc="item.goodsname"
        :title="item.goodsname"
        :thumb="$img + item.img"
    />
    </van-list>
    <div v-else class="goodsList">
      此列表没有任何商品
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import { getGoods } from "@/util/axios";
export default {
  data() {
    return {
      value: "",
      topnav: [
        {
          id: 1,
          name: "综合推荐",
        },
        {
          id: 2,
          name: "销量",
        },
        {
          id: 3,
          name: "价格",
        },
        {
          id: 4,
          name: "好评度",
        },
        {
          id: 5,
          name: "店铺",
        },
        {
          id: 6,
          name: "筛选",
        },
      ],
      goodsList: [],
    };
  },
  components: {
    navBar,
  },
  mounted() {
    getGoods({ fid: this.$route.query.id }).then((res) => {
      if(res.code==200)this.goodsList = res.list||[];
    });
  },
  methods: {
    //跳转详情事件
    goDetail(id) {
      this.$router.push({
        path: "/goodsdeaitl",
        query:{
          id
        }
      });
    },
  },
};
</script>

<style lang="" scoped>
nav {
  overflow: hidden;
  box-sizing: border-box;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
}
nav >>> .van-tabs__nav {
  background-color: transparent;
}
nav >>> .van-tab {
  color: #fff;
}
nav >>> .van-tabs__line {
  background-color: transparent;
}
nav >>> .van-tab--active {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
}
.goods {
  background: #fff4f2;
  border: 1px solid #ff6040;
  border-radius: 2px;
  width: 94.7%;
  height: 0.31rem;
  margin: 1.2% 2.7% 0 2.7%;
  font-size: 0.16rem;
}
.goodsList{
  text-align: center;
  font-size: 14px;
  color: #ccc;
  margin: 10% 0;
}
</style>